<template>
	<view>
		<view>
			<form @submit="onSubmit" report-submit>
				<!-- 信息 -->
				<view class="row-textarea b-f m-top20">
					<view class="content" style="height: 250px;">
						<textarea style="height: 250px;" name="content" maxlength="2000" placeholder="说说此刻的心情..." :value="textarea"  placeholderStyle="color:#ccc"></textarea>
					</view>
				</view>
				

				<view class="row-voucher b-f m-top20">
					<view class="row-title">选择图片 (最多6张)</view>
					<view class="image-list">
						<!-- 图片列表 -->
						<view class="image-preview" v-for="(item,index) in imageList">
							<text class="image-delete iconfont icon-shanchu" @tap="deleteImage" :data-index="index" :data-image-index="index"></text>
							<image mode="aspectFill" :src="item"></image>
						</view>
						<!-- 上传图片 -->
						<form v-if="imageList.length < 6" @submit="chooseImage" report-submit="true">
							<button class="btn-normal" form-type="submit">
								<view class="image-picker dis-flex flex-dir-column flex-x-center flex-y-center">
									<text class="choose__icon iconfont icon-tubiao_xiangji"></text>
									<text class="choose__text">上传图片</text>
								</view>
							</button>
						</form>
					</view>
				</view>

				<!-- 位置信息 -->
				<view class="row-textarea b-f m-top20" @tap="onClickLocation">
					<uni-icon type="location" size="30" color=m_color></uni-icon>
					{{m_location}}
				</view>

				<!-- 裁剪 -->
				<avatar @upload="myUpload" ref="avatar"></avatar>
				
				
				<!--  class="flow-fixed-footer b-f"-->
				<button class="otherSendBtn btn-normal" form-type="submit">
					<view class="flow-btn f-32">发送动态</view>
				</button>
			</form>
		</view>
		
	</view>
</template>

<script>
	
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	export default {
		components: {
			uniIcon,
			avatar
		},
		data() {
			return {
				// 图片列表
				imageList: [],
				tempFilesList: [],
				limit: "5",
				m_color: '#777777',
				m_location: '选择位置',
				videosrc: '',
				sellend:[],
				textarea:'ddd',
			};
		},
		onLoad() {
			this.getPageData()
		},
		onShow() {
			this.setData({
				textarea: ''
			});
		},
		methods: {
		/**
		 * 加载页面数据
		 */
		getPageData: function(callback) {
			let _this = this;
			this._get('page/index', {
				page_id: uni.getStorageSync('page_id')
			}, function(result) {
				// console.log(result.data);
				// 设置顶部导航栏栏
				_this.setPageBar(result.data.page);
				// 回调函数
				typeof callback === 'function' && callback();
			});
		},
		
		/**
		 * 设置顶部导航栏
		 */
		setPageBar: function(page) {
			// 设置页面标题
			uni.setNavigationBarTitle({
				title: page.params.title
			});
			// 设置navbar标题、颜色
			uni.setNavigationBarColor({
				frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
				backgroundColor: page.style.titleBackgroundColor
			})
		},
			// 裁剪回调
			myUpload: function(res)  {
				console.log('裁剪回调====>',res);
				let _this = this,
					imageList = _this.imageList;
				console.log(res);
				_this.tempFilesList.push(res.path);
				_this.setData({
					imageList: imageList.concat(res.path),
				});
				
				// this.$set(this.urls, rsp.index, rsp.path);
			},		
			/**
			 * 选择图片
			 */
			chooseImage: function(e) {
				let _this = this,
					index = 0,
					imageList = _this.imageList;
					
				let mode = 0;//裁剪   1原图
				if (mode == 0){
					// 记录formId
					_this.saveFormId(e.detail.formId);
					
					let listCount = 0;
					if (imageList.length > 0){
						listCount = 2;
					}
					_this.$refs.avatar.fChooseImg(index, {
						maskListIndex: listCount,  
					});
				}else{
					// 选择图片
					uni.chooseImage({
						count: 6 - imageList.length,
						sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: function(res) {
							_this.tempFilesList.push(res.tempFiles);

							_this.setData({
								imageList: imageList.concat(res.tempFilePaths),
							});
						}
					});
				}
			},
			
			
			onClickLocation(e) {
				let _this = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						_this.m_location = res.name
					}
				})
			},
			onSubmit: function(e) {
				let _this = this;
				
				if (!e.detail.value.content) {
					_this.showError('心情不能为空！');
					return false;
				}

				// 统计图片数量
				let imagesLength = _this.imageList.length;
				if (imagesLength == 0) {
					_this.showError('请选择图片！');
					return false;
				}

				uni.showLoading({
					title: '正在处理...',
					mask: true
				});


				_this._post_form('social.social/add', {
					content: e.detail.value.content,
					city: _this.m_location
				}, (result) => {
					// console.log(result);
					if (result.code === 1) {
						_this.onSendSubmit(e,result.data);
					} else {
						_this.showError('验证失败！');
					}
				});
			},

			/**
			 * 表单提交请求
			 */
			onSendSubmit: function(e,data) {
				let _this = this;

				console.log("_this.imageList",_this.imageList);
				let imagesLength = _this.imageList.length;
				// 文件上传
				let i = 0;
				this.imageList.forEach(function(filePath, fileKey) {
					// console.log('图片开始上传');
					uni.uploadFile({
						url: _this.api_root + 'social.social/upload', 
						filePath: filePath,
						name: 'image',
						formData: {
							s_id: data,
							wxapp_id: _this.siteInfo.wxapp_id,
							token: uni.getStorageSync('token'),
						},
						success: function(res) {
						},
						complete: function(res) {	
							console.log(JSON.stringify(res));
							i++;
							if (imagesLength === i) {
								// 所有文件上传完成
								// 执行回调函数
								uni.hideLoading();
								
								uni.showModal({
									title: '提示',
									content: '动态发送成功！',
									
									success: function(res) {
										
										let imageList = [];
										_this.setData({
											imageList:imageList,
											textarea: ''
										});
										uni.switchTab({
											url: "../pubu/pubu",
										});
									}
								});
							}
						}
					});
				});
			},
		

			/**
			 * 删除图片
			 */
			deleteImage: function(e) {
				let dataset = e.currentTarget.dataset,
					imageList = this.imageList;
				imageList.splice(dataset.imageIndex, 1);
				this.setData({
					imageList
				});

				this.tempFilesList.splice(dataset.imageIndex, 1);
				
				
			}

		}
	}
</script>


<style>
	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
		margin-top: 800upx;
	}

	.zai-btn1 {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
		margin-top: 10upx;
	}

	.row-textarea {
		padding: 24rpx 20rpx;
	}

	.row-textarea textarea {
		width: 100%;
		height: 220rpx;
		padding: 12rpx;
		border: 1rpx solid #e8e8e8;
		border-radius: 5rpx;
		box-sizing: border-box;
	}

	/* 上传凭证 */

	.row-voucher {
		padding: 24rpx 20rpx;
	}

	.row-voucher .image-list:after {
		clear: both;
		content: " ";
		display: table;
	}

	.row-title {
		color: #888;
		margin-bottom: 15rpx;
	}

	.row-voucher .image-list image {
		display: block;
		width: 150rpx;
		height: 150rpx;
	}

	.row-voucher .image-list .image-picker {
		width: 150rpx;
		height: 150rpx;
		border: 1rpx dashed #ccc;
		color: #ccc;
	}

	.row-voucher .image-list .image-picker .choose__icon {
		font-size: 56rpx;
		margin-bottom: 6rpx;
	}

	.row-voucher .image-list .image-picker .choose__text {
		font-size: 22rpx;
	}

	.row-voucher .image-list .image-picker,
	.image-list .image-preview {
		margin: 15rpx 30rpx 15rpx 0;
		float: left;
	}

	.row-voucher .image-list .image-picker:nth-child(4n+0),
	.row-voucher .image-list .image-preview:nth-child(4n+0) {
		margin-right: 0;
	}

	.row-voucher .image-list .image-preview {
		position: relative;
	}

	.row-voucher .image-list .image-preview .image-delete {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		height: 42rpx;
		width: 42rpx;
		line-height: 42rpx;
		background: rgba(0, 0, 0, 0.64);
		border-radius: 50%;
		color: #fff;
		font-weight: bolder;
		font-size: 22rpx;
		z-index: 10;
		text-align: center;
	}
	
	.otherSendBtn {
		width: 100%;
		text-align: center;
		color: #555555;
		font-size: 28upx;
		margin: auto;
		line-height: 80upx;
		position: fixed;
		justify-content: center;
		bottom: 0upx;
		
// #ifdef H5
		bottom: 100upx;
// #endif
	}
</style>
